<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { deleteCdnVersionApi, getVersionListApi } from '@/apis/modules/cdn'
import { byteConvertSite } from '@/utils/cdn'
import { commonTableProps } from '@/utils/table'
import EditorDialog from './dialogs/EditorDialog.vue'
import ImprintDetail from './dialogs/ImprintDetail.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()

const queryParams = ref({})

const {
  loading,
  data: tableData,
  pagination,
  run,
} = useListRequest(getVersionListApi, {
  params: queryParams,
  immediate: true,
})

const {
  visible: editorDialogVisible,
  open: openEditorDialog,
  data: editorDialogData,
} = usePopup()

const { visible: imprintVisible, data: imprintRecord, open } = usePopup()
// 删除
function handleDelete(record: any) {
  ModalHelper.error({
    title: '删除节点包',
    content: `删除节点包 “${record.version || '-'}” ，确定要删除吗？`,
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteCdnVersionApi({ id: record.id })
      await run()
      Message.success('删除成功')
    },
  })
}

// const baseUrl = computed(() => {
//   return import.meta.env.VITE_HTTP_API
// })

function downloadLink(record: VersionListItem) {
  return `${record.minio_link}`
}

const { copy } = useClipboard({ legacy: true })
function handleCopy(record: VersionListItem) {
  copy(`${record.minio_link}`)
  Message.success('复制成功')
}

const { createSortChange } = useTable(run, tableData)
const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditorDialog()"
        >
          上传节点包
        </a-button>
      </div>
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSorterChange"
    >
      <template #imprint="{ record }">
        <div class="common-box">
          <span class="truncate">{{ record.imprint }}</span>
          <i-icons-base-info
            class="table-icon flex-shrink-0 cursor-pointer text-7 hover:text-2"
            @click="open(record)"
          />
          <!-- <a-button @click="open(record)">
            详情
          </a-button> -->
        </div>
      </template>
      <template #file_size="{ record }">
        {{ byteConvertSite(record.file_size) }}
      </template>
      <template #action="{ record }">
        <a-link
          :href="downloadLink(record)"
          :hoverable="false"
        >
          <i-icons-download size="16px" />
        </a-link>
        <!-- <a-link
          :hoverable="false"
          :disabled="record.node_count > 0"
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="16px" />
        </a-link> -->
        <a-popover
          title=""
          content-class="!p-1 !mt-2"
          trigger="click"
        >
          <i-icons-more
            size="16px"
            class="cursor-pointer text-[#00A65B]"
          />
          <template #content>
            <section class="flex flex-col">
              <a-link
                :hoverable="false"
                class="popover-link !text-[#1D2129]"
                @click="handleCopy(record)"
              >
                <i-icons-copy size="16px" />
                <span>复制链接</span>
              </a-link>
              <a-link
                :hoverable="false"
                :disabled="record.node_count > 0"
                status="danger"
                class="popover-link text-[#FA5566]"
                @click="handleDelete(record)"
              >
                <i-icons-delete size="16px" />
                <span>删除</span>
              </a-link>
            </section>
          </template>
        </a-popover>
      </template>
    </a-table>
  </main-container>

  <editor-dialog
    v-model:visible="editorDialogVisible"
    :record="editorDialogData"
    @reload="run"
  />
  <imprint-detail
    v-model:visible="imprintVisible"
    :record="imprintRecord"
    @reload="run"
  />
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}

.popover-link {
  @apply !flex items-center !justify-start gap-x-[10px] w-[112px] h-8 !px-2 cursor-pointer hover:bg-[#F7F8FA] rounded;
}

.common-box {
  @apply flex gap-x-6px items-center;
}
</style>
